<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>index</title>
		<style>
			* {
				font-family: 微软雅黑;
				margin: 0px;
				padding: 0px;
			}

			#imgid {
				width: 128px;
				height: 128px;
				position: absolute;
				top: 0px;
				left: 0px;
			}

			#imgid div {
				width: 120px;
				height: 120px;
				background-color: pink;
				border-radius: 50%;
				display: block;
			}
		</style>
	</head>
	<body>
		<div id='imgid'>
			<div></div>
		</div>
	</body>
	<script>
		imgobj = document.getElementById('imgid');
		// 屏幕的高度 
		screenHeight = document.documentElement.clientHeight;
		screenWidth = document.documentElement.clientWidth;
		console.log(screenHeight);
		// div的高度
		imgHeight = 128;
		
		//屏幕的高度 - div的高度 = 我的球所能运动的高度
		diffHeight = screenHeight - imgHeight;
		diffWidth = screenWidth - imgHeight;

		ys = 0;
		yv = 10;
		yx = 0;
		yw =5;

		setInterval(function() {
			ys += yv;
			yx += yw;
			if (ys >= diffHeight) {
				ys = diffHeight;
				yv = -yv;
			}

			if (ys <= 0) {
				yv = -yv;
			}
			if (yx >= diffWidth) {
				yx = diffWidth;
				yw = -yw;
			}
			
			if (yx <= 0) {
				yw = -yw;
			}
			imgobj.style.top = ys + 'px';
			imgobj.style.left = yx + 'px';
		}, 10);
	</script>
</html>
